<template>
	<div class="writer" ref='writerBox'>
		<div class="boxTop" v-if="info.userID">
			<div class="boxTopLeft">
				<img :src="ip+'/'+info.userID.imgurl" />
			</div>
			<div class="boxTopRight">
				<div class="boxTopRightTop">
					<div class="boxTopRightTopLeft">{{info.userID.name}}</div>
					<div class="boxTopRightTopRight1" v-if="attention"  @mouseover="changeInfo" @mouseout="changeInfo">{{attenInfo}}</div>
					<div class="boxTopRightTopRight" v-else @click="atten">关注</div>
				</div>
				<div class="boxTopRightBottom">
					<div class="boxTopRightBottomBox">粉丝 15</div>
					<div class="boxTopRightBottomBox">文章 15</div>
				</div>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxContentBox" v-for="t in writerPost" :key="t._id">
				<div class="boxContentBoxTop">{{t.title}}</div>
				<div class="boxContentBoxBottom">点赞 {{t.like}} · 评论 {{t.comment}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['info', 'attentionInfo'],
		data() {
			return {
				attention: this.$props.attentionInfo,
				attenInfo: '已关注',
				writerPost: []
			}
		},
		methods: {
			handle() {
				let rightBoxHeight = this.$refs.writerBox.offsetHeight
				let rightBoxY = this.$refs.writerBox.getBoundingClientRect().y
				let allY = this.$refs.writerBox.parentElement.parentElement.getBoundingClientRect().y
				if(rightBoxHeight > window.innerHeight) {
					if (rightBoxY <= window.innerHeight - rightBoxHeight - 16) {
						this.$refs.writerBox.style.position = "fixed"
						this.$refs.writerBox.style.bottom = "16px"
						this.$refs.writerBox.style.width = "304px"
					}
					if (allY >= window.innerHeight - rightBoxHeight - 32) {
						this.$refs.writerBox.style.position = "relative"
						this.$refs.writerBox.style.bottom = "0"
					}
				}else{
					this.$refs.writerBox.style.position = "fixed"
					this.$refs.writerBox.style.top = "63px"
				}
			},
			changeInfo(){
				if(this.attenInfo == "已关注"){
					this.attenInfo = "取消关注"
				}else{
					this.attenInfo = "已关注"
				}
			},
			atten(){
				this.$axios({
					url: this.ip + '/attention',
					method: 'post',
					data: {
						userID: this.$storage.get('user').id,
						attentionID: this.$props.info.userID._id
					}
				}).then(res => {
					console.log(res.data)
					this.$emit('attentionOver')
					this.attention = true
				})
			},
		},
		mounted() {
			window.addEventListener("scroll", this.handle)
			this.$axios({
				url: this.ip + '/userPostListGet',
				method: 'post',
				data: {
					userID: this.$props.info.userID._id
				}
			}).then(res => {
				console.log(res.data.info)
				this.writerPost = res.data.info
			})
		},
		beforeDestroy() {
			window.removeEventListener("scroll", this.handle)
		}
	}
</script>

<style scoped>
	.writer {
		margin-top: 16px;
		background-color: #FFFFFF;
		box-shadow: 2px 2px 5px rgba(32, 32, 32, .3);
		border-radius: 8px;
	}

	.writer .boxTop {
		width: calc(100% - 32px);
		padding: 16px;
		display: flex;
		height: 45px;
		border-bottom: 1px solid #EEEEEE;
	}

	.writer .boxTop .boxTopLeft img {
		width: 45px;
		height: 45px;
		border-radius: 50%;
	}

	.writer .boxTop .boxTopRight {
		width: calc(100% - 16px);
		margin-left: 16px;
	}

	.writer .boxTop .boxTopRight .boxTopRightTop {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.writer .boxTop .boxTopRight .boxTopRightTop .boxTopRightTopLeft {
		height: 24px;
		font-size: 15px;
		line-height: 24px;
	}

	.writer .boxTop .boxTopRight .boxTopRightTop .boxTopRightTopRight,
	.writer .boxTop .boxTopRight .boxTopRightTop .boxTopRightTopRight1 {
		height: 24px;
		line-height: 24px;
		text-align: center;
		border-radius: 12px;
		font-size: 14px;
		cursor: pointer;
		user-select: none;
		transition: all .3s;
	}

	.writer .boxTop .boxTopRight .boxTopRightTop .boxTopRightTopRight {
		width: 45px;
		color: #996699;
		border: 1px solid #996699;
	}

	.writer .boxTop .boxTopRight .boxTopRightTop .boxTopRightTopRight1 {
		width: 75px;
		color: white;
		background-color: #996699;
		border: 1px solid #996699;
	}

	.writer .boxTop .boxTopRight .boxTopRightTop .boxTopRightTopRight:hover {
		background-color: #996699;
		color: white;
	}

	.writer .boxTop .boxTopRight .boxTopRightTop .boxTopRightTopRight1:hover {
		background-color: white;
		color: #996699;
	}

	.writer .boxTop .boxTopRight .boxTopRightBottom {
		display: flex;
	}

	.writer .boxTop .boxTopRight .boxTopRightBottom .boxTopRightBottomBox {
		margin-right: 10px;
		line-height: 20px;
		font-size: 12px;
		color: #969696;
	}

	.writer .boxContent .boxContentBox {
		width: calc(100% - 24px);
		padding: 16px;
		user-select: none;
		cursor: pointer;
	}
	.writer .boxContent .boxContentBox:hover {
		background-color: #f6f6f6;
	}

	.writer .boxContent .boxContentBox .boxContentBoxTop {
		font-size: 15px;
		line-height: 20px;
	}

	.writer .boxContent .boxContentBox .boxContentBoxBottom {
		line-height: 20px;
		font-size: 12px;
		color: #969696;
	}
</style>
